
    <form name="CPForm">
        <md-toolbar>
            <div class="md-toolbar-tools">
                <h2>Change Password</h2>
                <span flex></span>
                <!--<md-button class="md-icon-button" ng-click="cancel()">
                    <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
                </md-button>-->
            </div>
        </md-toolbar>
        <md-dialog-content>
            <div class="md-dialog-content">
                <md-input-container class="md-icon-float md-block md-accent inputValidation">
                    <!-- Use floating label instead of placeholder -->
                    <label>Username</label>
                    <!--<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name" ></md-icon>-->
                    <input required ng-model="vm.user" type="email" name="username" ng-pattern="/^.+@.+\..+$/" minlength="10" maxlength="100" ng-readonly="true">
                    <div ng-messages="CPForm.username.$error" role="alert">
                        <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
                            Your username is required and must be an email address
                        </div>
                    </div>
                </md-input-container>
                <md-input-container class="md-icon-float md-block md-accent" >
                    <!-- Use floating label instead of placeholder -->
                    <label>Current Password</label>
                    <!--<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="password" ></md-icon>-->
                    <input ng-model="vm.cpassword" type="password" name="password" ng-minlength="6" required>
                    <div ng-messages="CPForm.password.$error" role="alert">
                        <div ng-message-exp="['required', 'minlength']">
                            Your password is required
                        </div>
                    </div>
                </md-input-container>                
               
                <md-input-container class="md-icon-float md-block md-accent">
                    <!-- Use floating label instead of placeholder -->
                    <label>New Password</label>
                    <!--<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="password" ></md-icon>-->
                    <input ng-model="vm.npassword" type="password" name="password" ng-minlength="6" required>
                    <div ng-messages="CPForm.password.$error" role="alert">
                        <div ng-message-exp="['required', 'minlength']">
                            Your password is required
                        </div>
                    </div>
                </md-input-container>
                <label class="ErrText">{{vm.ErrorMessage}}</label>
            </div>
        </md-dialog-content>
        <md-dialog-actions layout="row">
            
            <span flex></span>
            <md-button class="md-accent" ng-click="vm.CancelClick()">
                Cancel
            </md-button>
            <md-button class="md-accent" ng-click="vm.ChangeClick()" style="margin-right:20px;">
                Change Password
            </md-button>
        </md-dialog-actions>
    </form>
